<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 视图 -->
		<div id='app'>
			{{name}}
			<input v-model="name" type="text">
		<div v-html='content'></div>
		<img src='../img/xiaoyixian.jpg'>
		<img v-bind:src='url'>
		<img :src='url' :width='width'>
		<button v-on:click="a=a+1">+</button>
		{{a}}
		<button @click="a=a-1">-</button>
		<hr>
		<img :src='url' :width='width' :height='height'>
		<button @click='width+=50'>宽度+50</button>
		<button @click='width-=50'>宽度-50</button>
		<button @click='height+=50'>高度+50</button>
		<button @click='height-=50'>高度-50</button>
		</div>
		
		<script>
			/* 空白vue实例  Vue.createApp()创建一个实例，.mount()绑定视图 */
			const app = Vue.createApp({
				data(){
					return{
						name:'傻逼',
						age:'18',
						username:'高位想',
						content:'<h1>hello vue</h1>',
						url: '../img/xiaoyixian01.jpg',
						width: 300,
						height:300,
						a:1
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>